<#cenluan title="${'查看照片-'+gallery.title}" menu="gallery">
    <ol class="breadcrumb">
        <li><a href="/gallery">相册</a></li>
        <li>${gallery.html}</li>
        <li><a href="/photo/${gallery.id}">照片</a></li>
        <li>照片详情</li>
    </ol>
    <div class="row">
        <div class="col-md-8">
            <img src="${photo.url}@!photo-show" class="img-responsive center-block mb20">
        </div>
        <div class="col-md-4 text-center">
            <p>
                ${photo.creater.html}
                上传于${photo.createTime,prettyTime}，${photo.viewCount}人看过，<span
                    id="favorite-count">${photo.favoriteCount}</span>人收藏
            </p>

            <div class="input-group mb10">
				<span class="input-group-btn">
					<!--@if(!isEmpty(previous)){-->
						<a class="btn btn-default" href="/photo/show/${previous}?order=${order!'0'}">
                            <span class="glyphicon glyphicon-chevron-left"></span>&nbsp;上一张
                        </a>
					<!--@}else{-->
						<button class="btn btn-default disabled">
                            <span class="glyphicon glyphicon-chevron-left"></span>&nbsp;上一张
                        </button>
					<!--@}-->
				</span>
				<span class="input-group-addon" style="width:101%;border-left: none;">
					${index}/${count}
				</span>
				<span class="input-group-btn">
					<!--@if(!isEmpty(next)){-->
						<a class="btn btn-default" href="/photo/show/${next}?order=${order!'0'}">
                            下一张&nbsp;<span class="glyphicon glyphicon-chevron-right"></span>
                        </a>
					<!--@}else{-->
						<button class="btn btn-default disabled">
                            下一张&nbsp;<span class="glyphicon glyphicon-chevron-right"></span>
                        </button>
					<!--@}-->
				</span>
            </div>
            <!--@//功能区域-->
            <div id="action-area">
                <p>
                    <button class="btn btn-default btn-block"
                    <!--@if(!favorited){print("style='display:none'");}--> id="btn-favorite-remove">
                    <span class="glyphicon glyphicon-heart-empty"></span>&nbsp;取消收藏
                    </button>
                </p>
                <p>
                    <button class="btn btn-default btn-block"
                    <!--@if(favorited){print("style='display:none'");}--> id="btn-favorite-add" >
                    <span class="glyphicon glyphicon-heart"></span>&nbsp;收藏照片
                    </button>
                </p>
                <script>
                    $(function () {
                        $("#btn-favorite-remove").click(function () {
                            var $this = $(this);
                            $.get("/photo/favorite/remove/${photo.id}", function (data) {
                                $("#favorite-count").text(data);
                                $this.hide();
                                $("#btn-favorite-add").show();
                            }, "text");
                        });
                        $("#btn-favorite-add").click(function () {
                            var $this = $(this);
                            $.get("/photo/favorite/add/${photo.id}", function (data) {
                                $("#favorite-count").text(data);
                                $this.hide();
                                $("#btn-favorite-remove").show();
                            }, "text");
                        });
                    });
                </script>
                <p>
                    <button class="btn btn-default btn-block"
                            onclick="showDialog({url:'/photo/fullScreen/${photo.id}',size:'lg'})">
                        <span class="glyphicon glyphicon-fullscreen"></span>&nbsp;查看大图
                    </button>
                </p>
                <p>
                    <a class="btn btn-default btn-block" href="${photo.url}" target="_blank">
                        <span class="glyphicon glyphicon-download"></span>&nbsp;下载原图
                    </a>
                </p>
                <!--@if(photo.id!=gallery.coverId&&galleryCreater){-->
                <p>
                    <button class="btn btn-default btn-block" id="btn-cover">
                        <span class="glyphicon glyphicon-picture"></span>&nbsp;设为封面
                    </button>
                </p>
                <script>
                    $(function () {
                        $("#btn-cover").click(function () {
                            var $this = $(this);
                            if (!confirm("确定要将这张图片设置为相册的封面吗？")) {
                                return;
                            }
                            $.getJSON("/gallery/setCover/${gallery.id}-${photo.id}"
                                    , function (json) {
                                        if (json.ok) {
                                            $this.replaceWith("<span class='text-success'>成功设置为封面</span>");
                                        } else {
                                            alert(json.msg);
                                        }
                                    });
                        });
                    });
                </script>
                <!--@}-->
                <!--@if(creater||galleryCreater||admin){-->
                <p>
                    <button class="btn btn-default btn-block" id="btn-del">
                        <span class="glyphicon glyphicon-trash"></span>&nbsp;删除照片
                    </button>
                </p>
                <script type="text/javascript">
                    $(function () {
                        $("#btn-del").click(function () {
                            if (!confirm("照片一旦删除将无法恢复，确定要删除这张照片吗？")) {
                                return;
                            }
                            $.getJSON("/photo/delete/${photo.id}", function (json) {
                                if (!json.ok) {
                                    alert(json.msg);
                                    return;
                                }
                                $("#action-area").html("<p class='text-danger'>照片已经被删除</p>");
                            });
                        });
                    });
                </script>
                <!--@}-->
            </div>
            <!-- action-area -->
        </div>
    </div>
</#cenluan>